<!--
 * @Description: 工单列表
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 王宇佳 1545291740@qq.com
 * @LastEditTime: 2025-10-08 09:05:02
-->
<template>
  <div>
    <!-- 搜索框开始 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-row>
        <el-col>
          <el-form-item>
            <el-select clearable v-model="form.status" placeholder="请选择工单状态">
              <el-option label="已完成" value="已完成"></el-option>
              <el-option label="进行中" value="进行中"></el-option>
              <el-option label="待接单" value="待接单"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="form.type" placeholder="请选择工单类型">
              <el-option label="安装" value="安装"></el-option>
              <el-option label="维修" value="维修"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toSearch">搜索</el-button>
          </el-form-item>
        </el-col>
        <!-- 搜索框结束 -->
        <!-- 表格开始 -->
        <el-col>
          <el-table :data="orderData" stripe style="width: 100%">
            <el-table-column type="index" :index="1" label="序号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="engineer_name" label="工程名称" width="180" align="center">
            </el-table-column>
            <el-table-column prop="device_name" label="设备名称" align="center">
            </el-table-column>
            <el-table-column prop="bill_why" label="问题描述" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template v-slot="scope">
                <div>
                  <!-- 条件渲染 -->
                  <el-tag v-if="scope.row.status == '已完成'">已完成</el-tag>
                  <el-tag v-else-if="scope.row.status == '进行中'" type="warning">进行中</el-tag>
                  <el-tag v-else type="danger">待接单</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="工单类型" align="center">
              <template v-slot="scope">
                <div>
                  <!-- 条件渲染 -->
                  <el-tag v-if="scope.row.type == '维修'">维修</el-tag>
                  <el-tag v-else type="danger">安装</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
              <template v-slot="scope">
                <div>
                  <el-link :underline="false" type="success">
                    <el-button type="text" @click="toDetails(scope.row.id)" :disabled="scope.row.type == '安装'">详情</el-button>
                    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
                      <!-- 走马灯 -->
                      <div class="block">
                        <span class="demonstration">维修图片</span>
                        <el-carousel trigger="click" height="150px">
                          <el-carousel-item v-for="(item,index) in photoData" :key="index">
                              <img :src="item" alt="">
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                      <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                      </span>
                    </el-dialog>
                  </el-link>
                  <el-link @click="toCancel(scope.row.id)" :underline="false" type="primary"
                    :disabled="scope.row.status == '进行中' || scope.row.status == '已完成'">取消
                  </el-link>
                  <el-link @click="toClose(scope.row.id)" :underline="false" type="primary"
                    :disabled="scope.row.status == '进行中'">删除
                  </el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <!-- 表格结束 -->
        <!-- 分页开始 -->
        <el-pagination background layout="sizes,prev, pager, next" :total="total" :page-size="params.pageSize"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
          :page-sizes="[5,8,10,20]">
        </el-pagination>
        <!-- 分页结束 -->
      </el-row>
    </el-form>

  </div>
</template>

<script>
import { get, del } from '@/utils/request';
export default {
  data() {
    return {
      //数据总条数 默认设置为0
      total: 0,
      workData: [],
      dialogVisible: false,
      form: {},
      orderData: [],
      params: {
        page: 1,
        pageSize: 5
      },
      photoData:[]
    };
  },
  computed: {},
  methods: {
    async toDetails(id){
      let res = await get('/workorder/findById',{id});
      console.log(res,'---');
      let temp = [];
      temp[0] = res.data.order[0].photo1;
      temp[1] = res.data.order[0].photo2;
      temp[2] = res.data.order[0].photo3;
      this.photoData = temp;
      this.dialogVisible = true;
    },
    //每页条数发生改变就会触发
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);//2条/页 =>5条/页
      this.params.pageSize = val;
      this.getEngData();
    },
    //每页页码发生改变就会触发
    handleCurrentChange(val) {
      //val表示最新页码 
      // console.log(`当前页: ${val}`);
      this.params.page = val;
      //重新查询数据
      this.getEngData();
    },
    // 搜索
    toSearch() {
      this.params.page = 1;
      this.getEngData();
    },
    // 获取数据
    async getEngData() {
      let temp = {
        ...this.params,
        ...this.form
      }
      let res = await get('/workorder/pageQuery', temp);
      // console.log(res, '设备数据');
      this.orderData = res.data.list;
      this.total = res.data.total;
    },
    // 删除弹框
    toClose(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //点了确定按钮 就发起删除工程请求
        let res = await del('workorder/deleteById', { id })
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
         //从第一页重新载入数据
      this.params.page = 1;
      //重新载入数据
      this.getEngData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    //取消弹框
    toCancel(id) {
      this.$confirm('是否取消接单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async ( ) => {
        //点了确定按钮 就发起取消接单请求
        let res = await get('/workorder/cancelOrder', { id })
        this.$message({
          type: 'success',
          message: '取消成功!'
        });
        //从第一页重新载入数据
      this.params.page = 1;
      //重新载入数据
      this.getEngData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  },
  created() {
    this.getEngData();
  },
  mounted() { },
};
</script>
<style lang="scss" scoped>
::v-deep .el-link--inner {
  margin-left: 5px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>